<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul{
        list-style: none;
        padding: 100px;
    }
    ul li{
        width: 130px;
         padding: 6px 0;
         background: skyblue;
         text-align: center;
         border-radius: 5px;
         position: relative;
    }
    .tips{
        position: absolute;
        top:-50px;
        left:0;
        width: 200px;
        padding: 6px 0;
        background: #000;
        color: #fff;
        border-radius: 5px;
        display: none;
    }
    .tips::after{
        content: '';
        position: absolute;
        top:34px;
        left: 20%;
        border: 10px solid transparent;
        border-top-color: #000;
    }
    ul li:hover .tips{
        display: block;
    }
    .leaf{
        height: 300px;
        width: 300px;
        background: green;
        border-radius: 50% 0 50% 0;
        position: relative;
    }
    .leaf::after{
        content: '';
        position: absolute;
        height: 400px;
        width: 1px;
        background: red;
        /* left:300px;
        top:0; */
        top:-100px;
        left:0;

        /* transform-origin: right top;
        transform: rotate(45deg) */
        transform-origin: left bottom;
        transform: rotate(45deg);
    }

</style>
<body>
    <ul>
        <li>
            hover出现弹窗
            <div class="tips">我是显示的内容</div>

        </li>
    </ul>

    <div class="leaf"></div>
</body>
</html>